<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:composition template="/WEB-INF/templates/common/admin.xhtml">
        <ui:define name="title">Track Cargo</ui:define>
        <ui:define name="content">
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

            <div class="ui-grid ui-grid-responsive">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-2" id="leftCol"></div>
                    <div class="ui-grid-col-8" id="mainCol">

                        <br/>
                        <h:form id="trackingForm">
                            <p:outputLabel value="Tracking ID  " />
                            <p:autoComplete id="trackIdInput" value="#{track.trackingId}" required="true" forceSelection="true" completeMethod="#{track.completeTracking}" />
                            <p:commandButton value="Track!" actionListener="#{track.onTrackById}" ajax="false"/>
                        </h:form>
                        <br/>

                        <h:panelGroup rendered="#{not empty track.cargo}">
                            <div id="result">
                                <p>Cargo <strong>#{track.cargo.trackingId}</strong> is currently <strong>#{track.cargo.statusText}</strong></p>
                                
                                <p>Estimated time of arrival in <strong>#{track.cargo.destination}</strong>: #{track.cargo.eta}</p>
                                <ui:fragment rendered="#{not empty track.cargo.nextExpectedActivity}"><p>#{track.cargo.nextExpectedActivity}</p></ui:fragment>
                                
                                <h:panelGroup rendered="#{track.cargo.misdirected}">
                                    <p><i class="fa fa-exclamation-triangle" style="color: #9b2332"></i> Cargo is misdirected.</p>
                                </h:panelGroup>

                                <h:panelGroup rendered="#{not empty track.cargo.events}">
                                    <strong>Handling History</strong><br/>

                                    <ui:repeat value="#{track.cargo.events}" var="leg">
                                        <ui:fragment rendered="#{leg.expected}">
                                            &#160;&#160;<i class="fa fa-check" style="color: green"/>&#160;#{leg.description}<br/>
                                        </ui:fragment>
                                        <ui:fragment rendered="#{!leg.expected}">
                                            &#160;&#160;<i class="fa fa-flag" style="color: #9b2332"/>&#160;#{leg.description}<br/>
                                        </ui:fragment>     
                                    </ui:repeat>
                                </h:panelGroup>
                            </div>
                        </h:panelGroup>
                    </div>

                    <div class="ui-grid-col-2" id="rightCol" style="background-color: white;background:0;"></div>
                </div>

                <div class="ui-grid-row">
                    <div class="ui-grid-col-2" id="leftCol2"></div>
                    <div class="ui-grid-col-8" id="mainCol2">
                        <br/>
                        <h:panelGroup rendered="#{not empty track.destinationCoordinates}">
                            <p:gmap center="#{track.destinationCoordinates}" fitBounds="true" zoom="2" model="#{track.mapModel}" type="PLAN"  style="width:620px;height:360px;">
                                <p:ajax event="pointSelect" listener="#{track.onPointSelect}"/> 
                            </p:gmap>

                        </h:panelGroup>
                        <p:separator />
                        <a href="dashboard.xhtml"><i class="fa fa-arrow-left fa-lg" style="color: #999999;"></i></a>
                    </div>

                    <div class="ui-grid-col-1" id="rightCol2"></div>
                </div>
            </div>        
        </ui:define>
    </ui:composition>
</html>